<!-- 文件夹详情 -->
<template>
  <div class="folder-detail-container">
      <div class="folder-detail-content">
          <div class="f-info">
              <div class="f-info__statistics">
                  <div class="f-info__statistics_title">
                      基本信息
                  </div>

                  <div class="f-info__statistics_content">
                      <div class="f-info__statistics_item">
                          <div class="f-info__statistics_item_num">突防指标体系</div>
                          <div class="f-info__statistics_item_name">名称</div>
                      </div>
                      <div class="f-info__statistics_item">
                          <div class="f-info__statistics_item_num">1</div>
                          <div class="f-info__statistics_item_name">包含指标数量</div>
                      </div>
                      <div class="f-info__statistics_item">
                          <div class="f-info__statistics_item_num">2023/1/1 10:22:22</div>
                          <div class="f-info__statistics_item_name">创建时间</div>
                      </div>
                      <div class="f-info__statistics_item">
                          <div class="f-info__statistics_item_word">
                              这这这这这这这这这这这
                          </div>
                          <div class="f-info__statistics_item_name">描述</div>
                      </div>
                  </div>
              </div>

          </div>
      </div>
  </div>
</template>

<script>

export default {
  data() {
      return {
          form: {},
          selectedNodeInfo: {}, // 当前选中节点的信息
      }
  },
  components: {
  },
  props: {
      nodeInfo: {
          type: Object,
      }
  },

  mounted() {
      this.form = this.nodeInfo.data;
  },

  methods: {
      submitForm() { },
      enterExperiment() {
          this.$router.push({ name: "experimentBuild", query: { experimentId: this.nodeInfo.id } })
      },
  }
}

</script>

<style lang="scss" scoped>
.folder-detail-container {
  width: 100%;
  height: 65%;
  box-sizing: border-box;

  .folder-detail-content {
      width: 100%;
      height: 85%;
      display: flex;
      margin-top: 20px;
      justify-content: space-around;
      box-sizing: border-box;

      .f-info {
          width: 80%;

          .f-info__statistics {
              border-radius: 5px;
              padding: 10px 20px;
              background-color: var(--ui-component-background-alt);
              margin-bottom: 30px;

              .f-info__statistics_title {
                  font-size: var(--ui-font-size-base);
              }

              .f-info__statistics_content {
                  display: flex;
                  justify-content: space-between;
                  margin-top: 20px;
                  flex-wrap: wrap;

                  .f-info__statistics_item {
                      .f-info__statistics_item_num {
                          font-size: var(--ui-font-size-title);
                      }

                      .f-info__statistics_item_word {
                          font-size: var(--ui-font-size-base);
                          color: var(--app-text-fg-low);
                      }

                      .f-info__statistics_item_name {
                          font-size: var(--ui-font-size-sm);
                          color: var(--app-text-fg-low);
                          margin-top: 10px;
                          margin-bottom: 20px;

                      }
                  }

                  & :last-child {
                      width: 100%;
                  }
              }

          }

      }
  }
}
</style>